<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm">
			<el-form-item label="规则名称">
				<el-input placeholder="输入规则名称" v-model="state.queryForm.ruleName"> </el-input>
			</el-form-item>
			<el-form-item label="是否有效">
				<el-select v-model="state.queryForm.invalidFlag" placeholder="请选择">
					<el-option v-for="item in validListData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属规则分类">
				<el-select v-model="state.queryForm.ruleTypeId" placeholder="请选择" clearable>
					<el-option v-for="item in rulesListData" :key="item.ruleTypeName" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="版本时间">
				<el-select v-model="state.queryForm.versionId" placeholder="请选择">
					<el-option v-for="item in vTimeListData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="resets" :icon="Refresh">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%">
			<el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
			<el-table-column label="规则名称" prop="ruleName"> </el-table-column>
			<el-table-column label="规则描述" prop="ruleDescription"> </el-table-column>
			<el-table-column label="所属规则分类" prop="ruleTypeName" width="110"> </el-table-column>
			<el-table-column label="规则参数类型" prop="ruleParameterType">
				<template #default="scope">
					<span v-if="scope.row.ruleParameterType == 1">SQL</span>
					<span v-if="scope.row.ruleParameterType == 2">代码块</span>
				</template>
			</el-table-column>
			<el-table-column label="规则参数" prop="ruleParameter" width="120" show-overflow-tooltip> </el-table-column>
			<el-table-column label="引用次数" prop="ed" width="110" sortable> </el-table-column>
			<el-table-column label="规则优先级" prop="rulePriority" width="120" sortable> </el-table-column>
			<el-table-column label="版本时间" prop="versionId" width="120" sortable> </el-table-column>
			<el-table-column label="状态" prop="runStatus">
				<template #default="scope">
					<div class="status-item" v-if="scope.row.runStatus === 1">运行中<i class="success-icon"></i></div>
					<div class="status-item" v-else>已停止<i class="error-icon"></i></div>
				</template>
			</el-table-column>
			<el-table-column label="是否有效" prop="invalidFlag"> </el-table-column>
			<el-table-column label="操作" width="100" align="center">
				<template #default="scope">
					<el-button v-if="scope.row.invalidFlag != '有效'" link @click="handlePlay(scope.row.id)">启用</el-button>
					<el-button v-else link type="danger" @click="handleStop(scope.$index, scope.row.id)">停用</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { IHooksOptions } from '@/hooks/interface'

import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'

import { useCrud } from '@/hooks/index'

import { getVersionTime, getRuleTypeList, stopRule, startRule } from '@/api/verification-rules/index'

const validListData = [
	{
		label: '全部',
		value: ''
	},
	{
		label: '有效',
		value: '0'
	},
	{
		label: '无效',
		value: '1'
	}
]

let rulesListData = ref([])
let vTimeListData = ref([])
let loading = ref(true)
const currentPage = ref(1)

let total = ref(0)

const state: IHooksOptions = reactive({
	dataListLoading: true,
	dataListUrl: '/data-governance/quality/ruleTemplate/page',
	queryForm: {
		ruleName: '',
		invalidFlag: '0',
		ruleTypeId: '',
		versionId: ''
	}
})

onMounted(() => {
	getVTimeData()
	getRuleList()
})

// 版本时间
const getVTimeData = () => {
	vTimeListData.value.push({
		label: '全部',
		value: ''
	})
	getVersionTime().then((res: any) => {
		vTimeListData.value = vTimeListData.value.concat(res.data)
	})
}

// 规则分类
const getRuleList = () => {
	getRuleTypeList().then(res => {
		rulesListData.value = rulesListData.value.concat(res.data)
	})
}

const handlePlay = row => {
	startRule([row]).then(() => {
		ElMessage({
			type: 'success',
			duration: 500,
			message: '操作成功!',
			onClose: () => {
				getDataList()
			}
		})
	})
}

const handleStop = (value, data) => {
	ElMessageBox.confirm('规则停止运行，会影响所有与本规则有关的字段核验，单表核验及跨表核验', `确定要停止本规则？`, {
		confirmButtonText: '停止',
		cancelButtonText: '取消',
		type: 'warning',
		customClass: 'datasetConfirm',
		confirmButtonClass: 'confirmBtn'
	}).then(() => {
		stopRule([data]).then(() => {
			ElMessage({
				type: 'success',
				duration: 500,
				message: '操作成功!',
				onClose: () => {
					getDataList()
				}
			})
		})
	})
}

const resets = () => {
	state.queryForm = {
		ruleName: '',
		invalidFlag: '0',
		ruleTypeId: '',
		versionId: ''
	}

	state.page = 1
	state.limit = 10

	getDataList()
}

// const init = () => {
// 	loading.value = true
// 	tableData.value = []

// 	total.value = 0
// 	const params = { ...state.queryForm, page_size: 10, page_no: currentPage.value }
// 	// console.log({ ...state.queryForm, ...listQuery })
// 	getDataList(params).then((res: any) => {
// 		console.log(res)
// 		loading.value = false
// 		if (res.data) {
// 			tableData.value = res.data.list
// 			total.value = res.data.total
// 		}
// 	})
// }

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle } = useCrud(state)
</script>
<style lang="sass">
.status-item
  display: flex
  align-items: center

.success-icon
  width: 20px
  height: 20px
  border-radius: 50%
  background: rgba(81, 196, 27, 1)
  margin-left: 5px

.error-icon
  width: 20px
  height: 20px
  border-radius: 50%
  background: rgba(245, 35, 45, 1)
  margin-left: 5px
</style>
